<template>
  <a-layout class="layout">

    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <main-sider :collapsed="collapsed" :menuList="menus" />
    </a-layout-sider>

    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <main-header :collapsed.sync="collapsed" />
      </a-layout-header>

      <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
        <main-content />
      </a-layout-content>
    </a-layout>

  </a-layout>
</template>

<script>
import { mapState } from 'vuex'
import mainHeader from './main-header'
import mainContent from './main-content'
import mainSider from './main-sider'

export default {
  name: "main",
  components: {
    mainSider,
    mainHeader,
    mainContent
  },
  data () {
    return {
      collapsed: false,
      menus: [],
    }
  },
  computed: {
    ...mapState({
      // 后台菜单
      permissionMenuList: state => state.user.permissionList
    }),
  },
  created () {
    this.menus = this.permissionMenuList.filter(res => res.hidden !== 1)
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.layout {
  min-height: 100vh !important;
  overflow-x: hidden;

  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .trigger:hover {
    color: #1890ff;
  }
}
</style>
